<script setup lang="ts">
import type { BasicSectionProps } from './BasicSection.vue'

const props: BasicSectionProps = {
  title: '产品功能',
  description: '快速、稳定、易用的内容分发加速服务'
}
</script>

<template>
  <basic-section id="product-features" v-bind="props">
    <div class="wapper">
      <div
        v-for="(item, idx) in mainParts.producFeatures"
        :key="idx"
        class="feature-item"
        v-shadow="{ filter: 80, radius: 100 }"
      >
        <div class="feature-item__bg"></div>
        <div class="title">{{ item.title }}</div>
        <p class="desc">{{ item.description }}</p>
        <!-- 性能优化 -->
        <i-pf-performance-optimization
          class="bg-image"
          v-if="item.image === 'performance_optimization'"
        />
        <!-- 实时统计 -->
        <i-pf-real-time-sstatistics
          class="bg-image"
          v-if="item.image === 'real_time_sstatistics'"
        />
        <!-- 负载均衡 -->
        <i-pf-load-balancing
          class="bg-image"
          v-if="item.image === 'load_balancing'"
        />
        <!-- 安全防护 -->
        <i-pf-safety-protection
          class="bg-image"
          v-if="item.image === 'safety_protection'"
        />
        <!-- 访问控制 -->
        <i-pf-access-control
          class="bg-image"
          v-if="item.image === 'access_control'"
        />
        <!-- 自定义端口 -->
        <i-pf-custom-port
          class="bg-image"
          v-if="item.image === 'custom_port'"
        />
        <!-- 刷新预热 -->
        <i-pf-refresh-preheating
          class="bg-image"
          v-if="item.image === 'refresh_preheating'"
        />
        <!-- 缓存配置 -->
        <i-pf-cache-configuration
          class="bg-image"
          v-if="item.image === 'cache_configuration'"
        />
      </div>
    </div>
  </basic-section>
</template>

<style scoped lang="less">
#product-features {
  background-image: url('@/assets/images/main-parts/bg/product-features.webp');
  .wapper {
    @apply grid grid-cols-4 rounded-14px overflow-hidden;
    .feature-item {
      @apply relative h-197px p-12 pr-140px box-border bg-white;

      .feature-item__bg {
        @apply absolute top-0 left-0 w-full h-full rounded-14px;
        opacity: 0;
        background-image: linear-gradient(90deg, #1462fc 0%, #07a0ff 100%);
        transition: opacity 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
      }
      &:hover {
        // @apply pt-9;

        .feature-item__bg {
          opacity: 1;
        }
        .title,
        .desc {
          @apply text-white -top-3;
        }
        .bg-image {
          border-radius: 0 0 14px 0;
          overflow: hidden;
        }
      }
      .title,
      .desc {
        @apply m-0 relative z-1 relative top-0;
      }
      .title {
        @apply mb-2 text-xl;
        font-family: 'PingFang SC medium';
        color: #0d0e15;
        line-height: 150%;
        transition: top 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
      }
      .desc {
        color: #41464f;
        font-size: 14px;
        font-weight: 400;
        line-height: 150%;
        transition: top 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
      }
      .bg-image {
        @apply absolute bottom-0 right-0 z-1;
        border-radius: 0;
        width: 160px;
        height: 110px;
        transition: all 100ms cubic-bezier(0.39, 0.575, 0.565, 1);
      }
    }
  }
}
</style>
